<div class="vpad10">
    <div class="mb-xs" ng-if="task.extraData.actionRequired === true">
        <div class="alert bg-yellow">
            <h4>
                <i class="icon fa fa-exclamation-triangle"></i> Action Required!
            </h4>
            <div>
                This task requires an action from your organisation.
                <button if-permission="manageTask" allowed="{{userPermissions}}" class="ml-m btn btn-sm btn-default"
                    ng-click="markAsDone(task)">Mark as Done</button>
            </div>
        </div>
    </div>
    <h4 class="mb-xs text-primary">
        Basic Information

        <div class="task-actions pull-right" if-permission="manageTask" allowed="{{userPermissions}}">
            <!-- <span if-permission="manageShare" allowed="{{userPermissions}}"> -->
            <span>
                <a href ng-click="scrollTo('#task-sharings')">
                    <span class="mr-xxs action-button">
                        <i class="fa fa-users"></i> Sharing ({{shares.length || 0}})
                    </span>
                </a>

                <span class="mr-xxs text-primary">|</span>
            </span>

            <a href ng-if="!!!task.extraData.actionRequired" ng-click="markAsActionRequired(task)">
                <span class="mr-xxs action-button text-primary">
                    <i class="fa fa-exclamation-triangle"></i> Require Action
                </span>
            </a>

            <a href ng-click="switchFlag()">
                <span class="mr-xxs action-button" ng-class="{true: 'text-yellow', false: 'text-muted'}[task.flag]">
                    <i class="fa fa-flag"></i> {{task.flag ? 'Unflag' : 'Flag'}}
                </span>
            </a>

            <a href ng-click="startTask(task)">
                <span ng-show="task.status == 'Waiting'" class="action-button text-primary">
                    <i class="fa fa-play"></i> Start
                </span>
            </a>

            <a href ng-click="openTask(task)">
                <span ng-show="task.status == 'Completed'" class="action-button text-success">
                    <i class="fa fa-check-circle"></i> Reopen
                </span>
            </a>

            <a href ng-click="closeTask(task)">
                <span ng-show="task.status == 'InProgress'" class="action-button text-muted">
                    <i class="fa fa-check-circle-o"></i> Close
                </span>
            </a>

            <span class="action-button" uib-dropdown ng-if="appConfig.connectors.cortex.enabled"
                if-permission="manageAction" allowed="{{userPermissions}}">

                <span class="mh-xxs text-primary">|</span>

                <a href class="text-primary noline" ng-click="getTaskResponders(true)">
                    <i class="text-primary fa fa-cog"></i>
                    Responders
                </a>
                <!--
                <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
                  <li ng-if="taskResponders && taskResponders.length === 0">
                    <a href ng-click="getTaskResponders(true)">
                      <strong><i class="fa fa-refresh mr-xxs"></i> No responders available</strong>
                    </a>
                  </li>
                  <li ng-repeat="responder in taskResponders">
                    <a href ng-click="runResponder(responder.id, responder.name)">
                      <strong>{{responder.name}}</strong>
                      <br>
                      <small>{{responder.description}}</small></a>
                  </li>
                </ul> -->
            </span>

        </div>
    </h4>
</div>

<div class="row">
    <div class="col-md-6">
        <dl class="dl-horizontal">
            <dt class="pull-left">Title</dt>
            <dd ng-if="canEdit">
                <updatable-simple-text on-update="updateField('title', newValue)" value="task.title" />
            </dd>
            <dd ng-if="!canEdit">
                {{task.title}}
            </dd>
        </dl>

        <dl class="dl-horizontal">
            <dt class="pull-left">Group</dt>
            <dd ng-if="canEdit">
                <updatable-simple-text on-update="updateField('group', newValue)" value="task.group" />
            </dd>
            <dd ng-if="!canEdit">
                {{task.group}}
            </dd>
        </dl>

        <dl class="dl-horizontal">
            <dt class="pull-left">Assignee</dt>
            <dd ng-if="canEdit">
                <updatable-user blank-text="Not Assigned" on-update="updateField('owner', newValue)"
                    value="task.assignee" query="assignableUsersQuery" />
            </dd>
            <dd ng-if="!canEdit">
                <user-info value="task.assignee" field="name"></user-info>
            </dd>
        </dl>
    </div>

    <div class="col-md-6">
        <dl class="dl-horizontal">
            <dt class="pull-left">Start date</dt>
            <dd ng-if="canEdit && task.status !== 'Waiting'">
                <updatable-date on-update="updateField('startDate', newValue)" value="task.startDate" />
            </dd>
            <dd ng-if="!canEdit && task.status !== 'Waiting'">
                <span ng-bind="task.startDate | shortDate"></span>
            </dd>
            <dd ng-if="task.status === 'Waiting'">
                <em class="text-warning">Not started yet</em>
            </dd>
        </dl>

        <dl class="dl-horizontal" ng-show="task.status == 'Completed'">
            <dt class="pull-left">Close date</dt>
            <dd>
                <span ng-bind="task.endDate | shortDate"></span>
            </dd>
        </dl>

        <dl class="dl-horizontal" ng-class="{'Completed': 'text-success', 'InProgress': 'text-warning'}[task.status]">
            <dt class="pull-left">Duration</dt>
            <dd ng-switch="task.status">
                <span ng-switch-when="Completed">
                    Closed after <em ng-bind="(task.endDate - task.startDate) | amDurationFormat : 'milliseconds'"></em>
                </span>
                <span ng-switch-when="InProgress">
                    Started <em am-time-ago="task.startDate"></em>
                </span>
                <span ng-switch-default>
                    <em class="text-warning">Not started yet</em>
                </span>
            </dd>
        </dl>

        <dl class="dl-horizontal" ng-show="task.status !== 'Completed'">
            <dt class="pull-left">Status
            </dt>
            <dd>
                <span ng-bind="task.status"></span>
            </dd>
        </dl>
    </div>

    <div class="col-md-12">
        <h4 class="vpad10 text-primary">Description</h4>
        <div ng-if="canEdit" class="description-pane">
            <updatable-text on-update="updateField('description', newValue)" placeholder="Task description"
                value="task.description"></updatable-text>
        </div>
        <div ng-if="!canEdit" class="description-pane">
            <div marked="task.description" class="markdown"></div>
            <em ng-if="!task.description" class="text-warning">Not specified</em>
        </div>
    </div>

    <!-- New Log -->
    <div class="col-md-12">
        <h4 class="vpad10 text-primary">Task logs</h4>

        <div class="row clearfix" ng-show="!adding">
            <div class="col-md-12">
                <div class="btn-toolbar" role="toolbar">
                    <div class="btn-group" uib-dropdown if-permission="manageTask" allowed="{{userPermissions}}">
                        <button class="btn btn-sm btn-primary" ng-click="showLogEditor()">
                            <i class="fa fa-plus"></i>
                            Add new task log</button>
                    </div>
                    <div class="btn-group" uib-dropdown>
                        <button class="btn btn-primary btn-sm dropdown-toggle" uib-dropdown-toggle type="button">
                            <i class="fa fa-sort"></i>
                            Sort by: {{sortOptions[state.sort]}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" uib-dropdown-menu>
                            <li ng-repeat="(key, value) in sortOptions">
                                <a ng-click="sortBy(key)">{{value}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group pull-right" role="group">
                        <page-sizer collection="logs" sizes="[10, 15, 30, 100]"></page-sizer>
                    </div>
                </div>

            </div>
        </div>
        <div class="row" ng-show="adding">
            <div class="col-md-12">
                <div class="clearfix">
                    <a class="pull-right" href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
                        target="_blank"><i class="fa fa-question-circle"></i> Markdown Reference</a>
                </div>
                <textarea name="newLog" autofocus="beforeNewLogShow" class="content-box"
                    markdown-editor="markdownEditorOptions" rows="10" ng-model="newLog.message"></textarea>
                <div control="state" file-chooser="" filemodel="newLog.attachment" ng-show="!state.attachmentCollapsed"
                    preview="false"></div>
                <div class="btn-toolbar mt-xxs">
                    <button class="btn btn-sm btn-default" ng-click="cancelAddLog();"
                        ng-disabled="loading">Cancel</button>
                    <button class="btn btn-sm btn-primary pull-right" ng-click="addLog();"
                        ng-disabled="loading || newLog.message.length === 0">
                        <i class="glyphicon glyphicon-comment"></i>
                        Add log
                    </button>
                    <button uib-btn-checkbox btn-checkbox-false="true" btn-checkbox-true="false"
                        class="btn btn-sm btn-default pull-right" ng-model="state.attachmentCollapsed"
                        ng-disabled="loading">
                        <i class="text-default glyphicon glyphicon-paperclip"></i>
                        {{state.attachmentCollapsed ? 'Add' : 'Discard'}}
                        attachment
                    </button>
                </div>
            </div>
        </div>

        <!-- Log list -->
        <div class="row mv-s" ng-show="logs.total === 0">
            <div class="col-md-12">
                <div class="empty-message">No records</div>
            </div>
        </div>

        <psearch control="logs"></psearch>
        <div ng-repeat="log in logs.values">
            <log-entry log="log" app-config="appConfig" permissions="userPermissions"></log-entry>
        </div>
        <psearch control="logs"></psearch>
    </div>

    <!-- <div class="col-md-12" id="task-sharings" if-permission="manageShare" allowed="{{userPermissions}}"> -->
    <div class="col-md-12" id="task-sharings">
        <h4 class="vpad10 text-primary">Task sharing</h4>
        <div class="btn-toolbar" role="toolbar" if-permission="manageShare" allowed="{{userPermissions}}">
            <div class="btn-group">
                <button class="btn btn-sm btn-primary" ng-click="addTaskShare()">
                    <i class="fa fa-plus"></i>
                    Add share
                </button>
            </div>
        </div>
        <div class="mv-s">
            <task-sharing-list task="task" shares="shares" read-only="true"
                on-require-action="markShareAsActionRequired(task, org)"
                on-cancel-require-action="markShareAsActionDone(task, org)" on-delete="removeShare(share)"
                permissions="userPermissions"></task-sharing-list>
        </div>
    </div>

    <div class="col-md-12">
        <div class="task-actions vpad10" ng-if="actions.values.length">
            <responder-actions header="Responder Jobs" actions="actions"></responder-actions>
        </div>
    </div>

</div>
